隨著 Component 的增加，我們勢必要準備自動化測試，讓之後對 framework 做修改或增加功能時，可以快速確保之前的功能沒有因此壞掉。

Cypress 就是一個不錯的 e2e test framework 的選擇。

而我們的 e2e test 其實也很簡單，基本上就是直接

1. 先把 server 起起來，
2. 然後開始 e2e test。
3. 結束

Cypress 的 config 可以直接把 server 的 baseUrl 準備好

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    projectId: "rtf9hd",
    baseUrl: 'http://localhost:3000',
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Cypress 的 unittest 也很簡單，很直接的操作 DOM。

假如我們有這樣的 Code

inp := tgcomp.Textarea(p.Main, p.State, "textarea")
tgcomp.Text("Value: " + inp)

那 Testcase 這樣寫就可以同時測到前端和後端有沒有好好運作：

describe('Input', () => {
  it('Textarea input', () => {
    cy.visit('/input')
    cy.get('textarea').type('testarea: 1')
    cy.get('textarea').blur()
    cy.get('textarea').type('2')
    cy.get('textarea').type('3')
    cy.get('textarea').blur()
    cy.contains('Value: testarea: 123')
  })
}

最後可以在 package.json 追加方便測試的指令：

{
  "name": "toolgui-e2e",
  "version": "0.1.0",
  "license": "MIT",
  "devDependencies": {
    "cypress": "^13.13.0"
  },
  "scripts": {
    "e2e:chrome": "cypress run --browser chrome",
    "e2e:firefox": "cypress run --browser firefox"
  }
}